<template lang="html">
  <div class="user-profile">
    <div class="page">
      <div class="wrapper">
        <div class="album-cover-blur">
          <img src="/static/img/avatar.jpg" alt="cover" width="100%" height="100%">
        </div>
        <div class="user-profile-content">
          <div class="user-profile-containter">
            <section class="user-profile-avatar">
              <div class="main-grids">
                <div class="inner">
                  <img src="/static/img/avatar.jpg" alt="Avatar User" width="100%" height="auto">
                  <div class="user-info">
                    <cite class="user-name">Melissa Rivera</cite>
                    <p class="location">Italy</p>
                  </div>
                </div>
              </div>
            </section>
            <section class="user-profile-follow-info">
              <div class="main-grids">
                <div class="inner">
                  <div class="followers">
                    <p class="number">211</p>
                    <p>Followers</p>
                  </div>
                  <div class="following">
                    <p class="number">480</p>
                    <p>Following</p>
                  </div>
                  <button class="following-btn" :class="{'isFollowing': isFollowing}" @click="follow">{{isFollowing ? 'FOLLOWING' : 'FOLLOW'}}</button>
                </div>
              </div>
            </section>
            <section class="section-titles">
              <header>
                <div class="main-grids">
                  <div class="inner">
                    <div class="icon"></div>
                    <h2>OWn Playlists</h2>
                    <div class="see-all">
                      <p>PLAY ALL</p>
                    </div>
                  </div>
                </div>
              </header>
            </section>
            <section class="playlists-swiper">
              <!-- <div class="swiper-container swiper-padding-left square-swiper" v-swiper:mySwiper="swiperOption">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="item in playlists" :key="item.src">
                    <div class="slide">
                      <div>
                        <div class="img-play">
                          <img :src="item.src" width="100%" height="auto">
                          <div class="blur"></div>
                          <div class="playlists-song-number"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->
              <swiper :options="swiperOption">
                <swiper-slide class="swiper-container swiper-padding-left square-swiper" v-for="(slide, index) in playlists" :key="index">
                  <div class="slide">
                    <div class="img-play">
                      <img :src="slide.src" width="100%" height="auto">
                      <div class="blur"></div>
                      <div class="playlists-song-number">{{slide.number}} SONGS</div>
                    </div>
                  </div>
                  <h2>{{slide.name}}</h2>
                </swiper-slide>
              </swiper>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isFollowing: false,
      playlists: [
        {src: '/static/img/playlists/playlists-1.jpg', number: '112', name: 'Pop Acoustic'},
        {src: '/static/img/playlists/playlists-2.jpg', number: '94', name: 'Relax in Acustic'},
        {src: '/static/img/playlists/playlists-3.jpg', number: '240', name: 'Time Machine'},
        {src: '/static/img/playlists/playlists-4.jpg', number: '88', name: 'Sweet Beach'},
        {src: '/static/img/playlists/playlists-5.jpg', number: '410', name: 'The Rock Show'},
        {src: '/static/img/playlists/playlists-6.jpg', number: '50', name: 'Best Covers'},
        {src: '/static/img/playlists/playlists-7.jpg', number: '85', name: 'Essential Indie'},
        {src: '/static/img/playlists/playlists-8.jpg', number: '311', name: 'Italo Disco'},
        {src: '/static/img/playlists/playlists-9.jpg', number: '344', name: `I Love My 90's`},
        {src: '/static/img/playlists/playlists-10.jpg', number: '77', name: 'Training Time'},
        {src: '/static/img/playlists/playlists-11.jpg', number: '284', name: 'Alternative'},
        {src: '/static/img/playlists/playlists-12.jpg', number: '55', name: 'Sign in the Car'}
      ],
      swiperOption: {
        pagination: {
          slidesPerView: 'auto',
          el: '.swiper-pagination'
        }
        // some swiper options...
      }
    }
  },
  methods: {
    follow () {
      this.isFollowing = !this.isFollowing
    }
  }
}
</script>

<style lang="stylus">

</style>
